<mat-card class="page-title">
    <span>模型编排</span>
    <div class="btn-toolbar float-right" role="toolbar">
        <button mat-icon-button (click)="validate()" matTooltip="校验">
            <mat-icon color="primary">check_circle_outline</mat-icon>
        </button>
    </div>

    <div class="btn-toolbar float-right" role="toolbar">
        <button mat-icon-button (click)="save()" matTooltip="保存">
            <mat-icon color="primary">save</mat-icon>
        </button>
    </div>
</mat-card>

<mat-card>
    <mat-grid-list cols = "10" rowHeight="40px">
        <mat-grid-tile colspan = "2" rowspan = "1" style="background: #bfbfbf">
            <span class="headline">解决方案</span>
        </mat-grid-tile>
        <mat-grid-tile colspan = "6" rowspan = "1" style="background: #dfdfdf">
            <div style="height: -webkit-fill-available; width: -webkit-fill-available;">
                <mat-chip-list>
                    <mat-chip class="attribute" color="primary" [selected]="newCompositionButton"  (click)="addTab(true)">新建方案</mat-chip>
                    <mat-chip class="attribute" color="warn" [selected]="clearCompositeSolutionButton" (click)="clearCompositeSolution()" [disabled]="currentSolution === null">清空方案</mat-chip>
                    <mat-chip class="attribute" color="accent" [selected]="closeCompositeSolutionButton" (click)="closeCompositeSolution()" [disabled]="currentSolution === null">关闭方案</mat-chip>
                </mat-chip-list>
            </div>
        </mat-grid-tile>
        <mat-grid-tile colspan = "1" rowspan = "1" style="background: #dfdfdf">
            <button mat-icon-button color="warn" (click)="removePath()" matTooltip="删除模型" [disabled]="!pathClicked">
                <mat-icon>delete_sweep</mat-icon>
            </button>
        </mat-grid-tile>
        <mat-grid-tile colspan = "1" rowspan = "1" style="background: #dfdfdf">

        </mat-grid-tile>

        <mat-grid-tile colspan = "2" rowspan = "1" style="background: #dfdfdf">
            <input name="search" type="text" class="form-control" placeholder="搜索"  style="width:200px" [formControl]="serchControl">
            <i class="fa fa-fw fa-search" aria-hidden="true"></i>
        </mat-grid-tile>
        <mat-grid-tile colspan = "6" rowspan = "13" >
            <div *ngIf="solutions.length !== 0" style="height: -webkit-fill-available; width: -webkit-fill-available;">
                <div id = "svgcanvas">
                    <mat-tab-group [selectedIndex]="selected.value"
                                   (selectedIndexChange)="selected.setValue($event); changeSolution($event)" (animationDone)="updateResource()">
                        <!---->
                        <mat-tab *ngFor="let tab of tabs; let index = index" >
                            <ng-template mat-tab-label>
                                {{tab}}
                                <sup (click)="removeTab(index)"> <mat-icon style="font-size: 5px">close</mat-icon></sup>
                            </ng-template>
                                <div (drop)="dropEl($event)" (dragenter)="dragElenter($event)" (dragover)="dragElover($event)" (dragend)="dragElend($event)">
                                    <div id="idsw-bpmn" class="bpmn" style="position: relative; width: 100%; height: 100%;">
                                        <svg  class="svgbackgd" >
                                            <defs>
                                                <marker id="arrowhead" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="6" markerHeight="6" orient="auto">
                                                    <path d="M 0 0 L 10 5 L 0 10 z" stroke-width="0" stroke="#333"></path>
                                                </marker>
                                            </defs>
                                        </svg>
                                    </div>
                                    <div style="height: 40px; border-top: solid 1px #e7e7e7; text-align: center; line-height: 40px; position: absolute;bottom: 2px; width: 100%">
                                    </div>
                                </div>
                        </mat-tab>
                    </mat-tab-group>
                </div>
            </div>
            <div *ngIf="solutions.length === 0" class="bkgd">
            </div>
        </mat-grid-tile>
        <mat-grid-tile colspan = "2" rowspan = "13" style="background: #dfdfdf">
            <div style="height: -webkit-fill-available; width: -webkit-fill-available;">
                <mat-tab-group >
                    <mat-tab label="属性">
                        <ul *ngIf="currentNode">
                            <br>
                            <li>
                                <label>模型名称:  {{currentNode.name}}</label>
                            </li>
                            <li>
                                <label>模型类别:  {{currentNode.modelType}}</label>
                            </li>
                            <li>
                                <label>模型工具:  {{currentNode.toolkitType}}</label>
                            </li>
                            <li>
                                <label>模型版本:  {{currentNode.version}}</label>
                            </li>
                            <li>
                                <label>模型作者:  {{currentNode.authorName}}</label>
                            </li>
                            <li>
                                <label>模型单位:  {{currentNode.company}}</label>
                            </li>
                            <li>
                                <a  (click)="viewSolution(currentNode)"><label class="attribute">浏览更多信息...</label></a>
                            </li>
                        </ul>
                    </mat-tab>
                    <mat-tab label="配置">配置</mat-tab>
                </mat-tab-group>
            </div>
        </mat-grid-tile>
        <mat-grid-tile colspan = "2" rowspan = "12" style="background: lightgray">
            <div style="height: -webkit-fill-available; width: -webkit-fill-available;" id="left-wrapper">
                <ul class="sidebar-nav">
                    <li *ngFor="let cat of filteredItems | async">
                        <a class="open">
                        <a class="open">
                            <i class="fa fa-folder-o" (click)="cat.expanded = !cat.expanded" expand [class]="cat.expanded ? 'fa fa-folder-open' : 'fa fa-folder'"></i>
                            <span>{{cat.name}}</span>
                        </a>
                        <ul *ngIf="cat.expanded && cat.nodes.length > 0">
                            <li *ngFor="let item of cat.nodes" class="node" [id]="item.id" draggable="true" (dragstart)="dragElStart($event)">
                                <a >
                                    <i class="fa fa-database"></i>
                                    <span>{{item.name}}</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </mat-grid-tile>
    </mat-grid-list>
</mat-card>

